<template>
  <div class="search-result">
    <!-- 最佳匹配 -->
    <Loading v-if="MyLoading"></Loading>
    <div class="match-list" v-if="isShowMatch">
      <h3 class="title">最佳匹配</h3>
      <div class="match-item" @click="getSingerDetail(singerId)">
       <div class="match-left">
          <van-image width="50" height="50" fit="cover" class="img" :src="singerData.picUrl">
            <template v-slot:loading>
    <van-loading type="spinner" size="20" />
  </template>
          </van-image>
          <div class="left2">歌手： <span class="active">{{Singer}}</span></div>
       </div>
          <van-icon class="icon" size="16" name="arrow" color="#9b9b9b"/>
      </div>
    </div>
    <!-- 列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :error.sync="error"
      error-text="请求失败，点击重新加载">

      <!-- 循环音乐列表 -->
      <MusicList :newSongs="resultList" :showNum="false" @play="play" ></MusicList>
    </van-list>
  </div>
</template>

<script>
import {
  searchResults
} from '@/api/search.js'
import MusicList from '@/components/music-list/music-list.vue'
import Loading from '@/components/Loading.vue'
import { mapMutations } from 'vuex'
export default {
  props: {
    keyword: {
      type: String
    }

  },
  data () {
    return {
      resultList: [], // 存放结果数据
      page: 1, // 控制页数
      MyLoading: true,
      loading: false,
      finished: false,
      error: false,
      Singer: '', // 歌手名称
      singerId: 0, // 歌手Id
      singerData: [], // 最佳歌手一些数据
      isShowMatch: false // 控制展示最佳歌手
    }
  },
  created () {
    this.getMatchList()
  },
  mounted () {
    this.MyLoading = false
  },
  methods: {
    async onLoad () {
      this.page++
      try { // 异步更新数据
        const {
          data: res
        } = await searchResults({
          keywords: this.keyword,
          limit: 20,
          offset: (this.page - 1) * 20
        })

        if (res.code !== 200) {
          this.error = true
        }
        const results = res.result.songs.map(v => {
          v.song = {
            privilege: v.privilege, // 是否
            artists: v.ar, // 艺术家
            album: v.al //
          }
          return v
        })
        console.log(results)
        // 2.请求数据添加到数组列表中
        this.resultList.push(...this.resultList, ...results)

        // this.$store.commit('getSingerMusic', this.resultList)
        // 3.将本次加载中的loading 关闭
        this.loading = false
        if (results.songCount === 0) {
          this.finished = true
        }
        // 4 判断是否有数据如果有更新下一个数据页码 如果没有 则加载状态finished 设置为结束
      } catch (err) {
        // 加载失败了 loading 也要关闭
        this.loading = false
        this.finished = true
      }
    },
    // 获取最佳歌手
    async getMatchList () {
      const { data: res } = await searchResults({
        keywords: this.keyword,
        type: 100
      })
      console.log(res.result.artists[0])
      this.singerData = res.result.artists[0]
      this.singerId = res.result.artists[0].id
      this.Singer = res.result.artists[0].name // 歌手名
      var regexp = new RegExp(this.keyword)
      // console.log(regexp)
      // console.log(regexp.test(this.Singer))
      this.isShowMatch = regexp.test(this.Singer)
    },

    getSingerDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    //  获取歌曲id
    ...mapMutations(['getCurrentMusic']),
    play (e) {
      this.getCurrentMusic(e)
    }
  },

  components: {
    MusicList,
    Loading
  }
}

</script>

<style lang="less" scoped>
  .match-list {
     margin-left: 10px;
     padding: 8px 0 4px;
     margin-right: 10px;
     border-bottom: 1px solid rgb(230, 226, 226);
    .title {
      margin-bottom: 5px;
      font-size: 12px;
      line-height: 16px;
      color: #666;
    }

    .match-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .match-left{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 17px;

      .left2{
        margin-left: 5px;
        .active{
          color: #507daf;
        }
      }
    }
    }
  }

</style>
